<template>
  <view class="history-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="navbar-left" @click="navigateBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <view class="navbar-title">答题历史</view>
      <view class="navbar-right">
        <uni-icons type="search" size="20" color="#666" @click="toggleSearch"></uni-icons>
      </view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-container" v-if="showSearch">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input 
          class="search-input" 
          placeholder="搜索问卷名称..." 
          v-model="searchKeyword"
          @input="handleSearch"
        />
        <view class="search-cancel" @click="clearSearch" v-if="searchKeyword">
          <uni-icons type="clear" size="16" color="#999"></uni-icons>
        </view>
      </view>
    </view>

    <!-- 统计信息 -->
    <view class="stats-container">
      <view class="stats-card">
        <view class="stats-number">{{ totalCount }}</view>
        <view class="stats-label">总答题数</view>
      </view>
      <view class="stats-card">
        <view class="stats-number">{{ averageScore.toFixed(1) }}</view>
        <view class="stats-label">平均分</view>
      </view>
      <view class="stats-card">
        <view class="stats-number">{{ highScoreCount }}</view>
        <view class="stats-label">优秀次数</view>
      </view>
    </view>

    <!-- 筛选标签 -->
    <view class="filter-container">
      <scroll-view class="filter-scroll" scroll-x>
        <view class="filter-tags">
          <view 
            class="filter-tag" 
            :class="{ active: currentFilter === 'all' }"
            @click="setFilter('all')"
          >
            全部
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: currentFilter === 'excellent' }"
            @click="setFilter('excellent')"
          >
            优秀
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: currentFilter === 'good' }"
            @click="setFilter('good')"
          >
            良好
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: currentFilter === 'average' }"
            @click="setFilter('average')"
          >
            一般
          </view>
          <view 
            class="filter-tag" 
            :class="{ active: currentFilter === 'recent' }"
            @click="setFilter('recent')"
          >
            最近一周
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 历史记录列表 -->
    <scroll-view class="history-list" scroll-y refresher-enabled @refresherrefresh="onRefresh">
      <!-- 加载状态 -->
      <view class="loading-container" v-if="loading">
        <uni-load-more status="loading" :content-text="{ contentdown: '上拉显示更多', contentrefresh: '正在加载...', contentnomore: '没有更多数据了' }"></uni-load-more>
      </view>

      <!-- 空状态 -->
      <view class="empty-container" v-else-if="filteredHistoryList.length === 0">
        <image class="empty-image" src="/static/images/empty-history.png" mode="aspectFit"></image>
        <view class="empty-text">暂无答题记录</view>
        <view class="empty-desc">快去完成一些问卷吧~</view>
        <button class="empty-btn" @click="goToSurvey">去答题</button>
      </view>

      <!-- 历史记录卡片 -->
      <view class="history-item" v-for="(item, index) in filteredHistoryList" :key="item.id" @click="viewDetail(item)">
        <!-- 占位符状态 -->
        <template v-if="item.isPlaceholder">
          <view class="item-header">
            <view class="item-title placeholder-text"></view>
            <view class="item-score placeholder-score"></view>
          </view>
        </template>
        
        <!-- 真实数据状态 -->
        <template v-else>
          <view class="item-header">
            <view class="item-title">{{ item.questionnaire_name }}</view>
            <view class="item-score" :class="getScoreClass(item.score)">
              {{ item.score }}分
            </view>
          </view>
        </template>
        
        <!-- 占位符内容 -->
        <template v-if="item.isPlaceholder">
          <view class="item-content">
            <view class="item-info">
              <view class="info-row">
                <view class="placeholder-icon"></view>
                <view class="placeholder-text-small"></view>
              </view>
              <view class="info-row">
                <view class="placeholder-icon"></view>
                <view class="placeholder-text-small"></view>
              </view>
              <view class="info-row">
                <view class="placeholder-icon"></view>
                <view class="placeholder-text-small"></view>
              </view>
            </view>
            
            <view class="item-actions">
              <view class="action-btn">
                <view class="placeholder-icon"></view>
                <view class="placeholder-text-tiny"></view>
              </view>
              <view class="action-btn">
                <view class="placeholder-icon"></view>
                <view class="placeholder-text-tiny"></view>
              </view>
            </view>
          </view>
        </template>
        
        <!-- 真实数据内容 -->
        <template v-else>
          <view class="item-content">
            <view class="item-info">
              <view class="info-row">
                <uni-icons type="calendar" size="14" color="#999"></uni-icons>
                <text class="info-text">{{ formatDate(item.submit_time) }}</text>
              </view>
              <view class="info-row">
                <uni-icons type="star" size="14" color="#999"></uni-icons>
                <text class="info-text">{{ item.rank }}</text>
              </view>
              <view class="info-row" v-if="item.category">
                <uni-icons type="flag" size="14" color="#999"></uni-icons>
                <text class="info-text">{{ item.category }}</text>
              </view>
            </view>
            
            <view class="item-actions">
              <view class="action-btn" @click.stop="shareResult(item)">
                <uni-icons type="redo" size="16" color="#007AFF"></uni-icons>
                <text class="action-text">分享</text>
              </view>
              <view class="action-btn" @click.stop="retakeTest(item)">
                <uni-icons type="reload" size="16" color="#FF9500"></uni-icons>
                <text class="action-text">重测</text>
              </view>
            </view>
          </view>
        </template>

        <!-- 占位符进度条 -->
        <template v-if="item.isPlaceholder">
          <view class="score-progress">
            <view class="progress-bar placeholder-progress"></view>
            <view class="placeholder-text-tiny"></view>
          </view>
        </template>
        
        <!-- 真实数据进度条和标签 -->
        <template v-else>
          <view class="score-progress">
            <view class="progress-bar">
              <view class="progress-fill" :style="{ width: (item.score / 100) * 100 + '%' }"></view>
            </view>
            <view class="progress-text">{{ item.score }}/100</view>
          </view>

          <!-- 标签 -->
          <view class="item-tags" v-if="item.tags && item.tags.length > 0">
            <view class="tag" v-for="tag in item.tags" :key="tag">{{ tag }}</view>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 历史成绩数据
      historyData: null,
      // UI状态
      loading: true,
      showSearch: false,
      searchKeyword: '',
      currentFilter: 'all',
      refreshing: false,
      // 占位数据
      placeholderItems: Array(3).fill().map((_, index) => ({
        id: `placeholder-${index}`,
        isPlaceholder: true
      }))
    }
  },
  
  computed: {
    // 过滤后的历史记录列表
    filteredHistoryList() {
      // 如果正在加载，显示占位符
      if (this.loading) {
        return this.placeholderItems;
      }
      
      let list = this.historyList;
      
      // 搜索过滤
      if (this.searchKeyword) {
        list = list.filter(item => 
          item.questionnaire_title.toLowerCase().includes(this.searchKeyword.toLowerCase())
        );
      }
      
      // 分类过滤
      switch (this.currentFilter) {
        case 'excellent':
          list = list.filter(item => item.score >= 90);
          break;
        case 'good':
          list = list.filter(item => item.score >= 80 && item.score < 90);
          break;
        case 'average':
          list = list.filter(item => item.score < 80);
          break;
        case 'recent':
          const oneWeekAgo = new Date();
          oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
          list = list.filter(item => new Date(item.submit_time) >= oneWeekAgo);
          break;
      }
      
      return list.sort((a, b) => new Date(b.submit_time) - new Date(a.submit_time));
    },
    
    // 历史记录列表
    historyList() {
      if (this.historyData && this.historyData.questionnaire_history) {
        return this.historyData.questionnaire_history.map(item => ({
          id: item.submit_id,
          questionnaire_name: item.questionnaire_title,
          questionnaire_title: item.questionnaire_title,
          score: item.score,
          rank: this.getScoreRank(item.score),
          submit_time: item.submit_time,
          category: "问卷测评",
          tags: ["测评"],
          questionnaire_id: item.questionnaire_id,
          questionnaire_description: item.questionnaire_description
        }));
      }
      return [];
    },
    
    // 统计数据
    totalCount() {
      return this.historyData?.statistics?.total_questionnaires || 0;
    },
    
    averageScore() {
      return this.historyData?.statistics?.average_score || 0;
    },
    
    highScoreCount() {
      return this.historyData?.statistics?.excellent_count || 0;
    }
  },
  
  onLoad() {
    // 页面加载时的初始化
  },
  
  mounted() {
    // 判断登录状态
    if (!uni.getStorageSync('isLogin') || !uni.getStorageSync('token')) {
      uni.showModal({
        title: '提示',
        content: '请先登录才能使用该服务',
        success: function (res) {
          if (res.confirm) {
            uni.navigateBack({
              delta: 2
            });
          } else if (res.cancel) {
            uni.navigateBack({
              delta: 2
            });
          }
        }
      });
      return;
    }
    
    // 获取历史数据
    this.getHistorySurvey();
  },
  
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack();
    },
    
    // 切换搜索框显示
    toggleSearch() {
      this.showSearch = !this.showSearch;
      if (!this.showSearch) {
        this.searchKeyword = '';
      }
    },
    
    // 处理搜索
    handleSearch() {
      // 搜索逻辑已在computed中处理
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKeyword = '';
    },
    
    // 设置过滤条件
    setFilter(filter) {
      this.currentFilter = filter;
    },
    
    // 下拉刷新
    onRefresh() {
      this.refreshing = true;
      this.getHistorySurvey().finally(() => {
        this.refreshing = false;
      });
    },
    
    // 格式化日期
    formatDate(dateString) {
      if (!dateString) {
        return '未知时间';
      }
      
      let date;
      
      try {
        // 处理多种日期格式，确保 iOS 兼容性
        let processedDateString = dateString;
        
        // 如果是 "YYYY-MM-DD HH:mm:ss" 格式，转换为 "YYYY-MM-DDTHH:mm:ss"
        if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
          processedDateString = dateString.replace(' ', 'T');
        }
        // 如果是 "YYYY/MM/DD HH:mm:ss" 格式，转换为 "YYYY-MM-DDTHH:mm:ss"
        else if (/^\d{4}\/\d{2}\/\d{2} \d{2}:\d{2}:\d{2}$/.test(dateString)) {
          processedDateString = dateString.replace(/\//g, '-').replace(' ', 'T');
        }
        // 如果是 "YYYY-MM-DD" 格式，保持不变
        else if (/^\d{4}-\d{2}-\d{2}$/.test(dateString)) {
          processedDateString = dateString;
        }
        
        date = new Date(processedDateString);
        
        // 如果还是无效，尝试手动解析
        if (isNaN(date.getTime())) {
          const parts = dateString.match(/(\d{4})[\/\-](\d{2})[\/\-](\d{2})(?:\s+(\d{2}):(\d{2}):(\d{2}))?/);
          if (parts) {
            const [, year, month, day, hour = '00', minute = '00', second = '00'] = parts;
            date = new Date(parseInt(year), parseInt(month) - 1, parseInt(day), parseInt(hour), parseInt(minute), parseInt(second));
          }
        }
        
      } catch (error) {
        console.warn('Date parsing error:', error, 'for dateString:', dateString);
        return '日期格式错误';
      }
      
      // 检查日期是否有效
      if (isNaN(date.getTime())) {
        console.warn('Invalid date string:', dateString);
        return '日期格式错误';
      }
      
      const now = new Date();
      const diff = now - date;
      const days = Math.floor(diff / (1000 * 60 * 60 * 24));
      
      if (days === 0) {
        return '今天';
      } else if (days === 1) {
        return '昨天';
      } else if (days < 7) {
        return `${days}天前`;
      } else {
        return `${date.getMonth() + 1}月${date.getDate()}日`;
      }
    },
    
    // 根据分数获取等级
    getScoreRank(score) {
      if (score >= 90) return '优秀';
      if (score >= 80) return '良好';
      if (score >= 60) return '一般';
      return '待提高';
    },
    
    // 获取分数样式类
    getScoreClass(score) {
      if (score >= 90) return 'score-excellent';
      if (score >= 80) return 'score-good';
      if (score >= 60) return 'score-average';
      return 'score-poor';
    },
    
    // 查看详情
    viewDetail(item) {
      uni.navigateTo({
        url: `/pages/result/detail?id=${item.id}`
      });
    },
    
    // 分享结果
    shareResult(item) {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.shareToWeChat(item);
              break;
            case 1:
              this.shareToMoments(item);
              break;
            case 2:
              this.copyLink(item);
              break;
          }
        }
      });
    },
    
    // 重新测试
    retakeTest(item) {
      uni.showModal({
        title: '确认重测',
        content: `确定要重新进行"${item.questionnaire_name}"测试吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: `/pages/survey/detail?id=${item.id}&retake=true`
            });
          }
        }
      });
    },
    
    // 去答题
    goToSurvey() {
      uni.switchTab({
        url: '/pages/creativity/index'
      });
    },
    
    // 分享到微信
    shareToWeChat(item) {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    
    // 分享到朋友圈
    shareToMoments(item) {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    
    // 复制链接
    copyLink(item) {
      uni.setClipboardData({
        data: `我在心理测评中获得了${item.score}分，快来试试吧！`,
        success: () => {
          uni.showToast({
            title: '已复制到剪贴板',
            icon: 'success'
          });
        }
      });
    },
    
    // 获取历史问卷数据
    async getHistorySurvey() {
      this.loading = true;
      
      try {
        console.log('获取历史成绩中...');
        
        // 获取token信息
        const token = uni.getStorageSync('token');

        const res = await uni.request({
          url: 'https://wxapi.xiaoyiwl.cn/wx_questionnare/get_user_questionnare_history.php',
          method: "GET",
          data: {
            token: token
          },
          timeout: 8000,
          dataType: "json"
        });

        // console.log('接口返回完整信息:', res);
        // console.log('接口返回状态码:', res.statusCode);
        // console.log('接口返回数据:', res.data);

        if (res.statusCode === 200 && res.data.code === 200) {
          this.historyData = res.data.data;
          console.log('历史成绩获取成功', this.historyData);
        } else if (res.statusCode === 404) {
          console.log('接口返回404，暂无数据');
          uni.showToast({ title: '暂无数据', icon: 'none' });
        } else {
          console.log('接口返回异常状态码:', res.statusCode);
          uni.showToast({ title: '请求失败', icon: 'none' });
        }

      } catch (error) {
        console.error('请求异常详情:', error);
        uni.showToast({ title: '网络请求失败', icon: 'none' });
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<style scoped lang="scss">
.history-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300rpx;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    z-index: 0;
  }
}

/* 导航栏 */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  padding-top: calc(var(--status-bar-height) + 20rpx);
  position: relative;
  z-index: 10;

  .navbar-left, .navbar-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
  }

  .navbar-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }
}

/* 搜索容器 */
.search-container {
  padding: 0 30rpx 20rpx;
  position: relative;
  z-index: 10;

  .search-box {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50rpx;
    padding: 20rpx 30rpx;
    backdrop-filter: blur(10px);

    .search-input {
      flex: 1;
      margin-left: 20rpx;
      font-size: 28rpx;
      color: #333;

      &::placeholder {
        color: #999;
      }
    }

    .search-cancel {
      margin-left: 20rpx;
      padding: 10rpx;
    }
  }
}

/* 统计信息 */
.stats-container {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
  position: relative;
  z-index: 10;

  .stats-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20rpx;
    padding: 30rpx 20rpx;
    text-align: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);

    .stats-number {
      font-size: 48rpx;
      font-weight: 700;
      color: #667eea;
      line-height: 1;
    }

    .stats-label {
      font-size: 24rpx;
      color: #666;
      margin-top: 10rpx;
    }
  }
}

/* 筛选容器 */
.filter-container {
  padding: 0 30rpx 20rpx;
  position: relative;
  z-index: 10;

  .filter-scroll {
    white-space: nowrap;
  }

  .filter-tags {
    display: flex;
    gap: 20rpx;

    .filter-tag {
      padding: 16rpx 32rpx;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #fff;
      white-space: nowrap;
      backdrop-filter: blur(10px);
      transition: all 0.3s ease;

      &.active {
        background: rgba(255, 255, 255, 0.9);
        color: #667eea;
        font-weight: 600;
      }
    }
  }
}

/* 历史记录列表 */
.history-list {
  flex: 1;
  background: #f8f9fa;
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx 0;
  position: relative;
  z-index: 5;
  min-height: calc(100vh - 500rpx);
}

/* 加载状态 */
.loading-container {
  padding: 60rpx 0;
  text-align: center;
}

/* 空状态 */
.empty-container {
  text-align: center;
  padding: 100rpx 60rpx;
  margin: 0 30rpx;

  .empty-image {
    width: 300rpx;
    height: 300rpx;
    margin-bottom: 40rpx;
  }

  .empty-text {
    font-size: 32rpx;
    color: #333;
    font-weight: 600;
    margin-bottom: 20rpx;
  }

  .empty-desc {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 60rpx;
  }

  .empty-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 50rpx;
    padding: 24rpx 60rpx;
    font-size: 28rpx;
    font-weight: 600;
  }
}

/* 历史记录项 */
.history-item {
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  margin: 0 30rpx 30rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  }

  .item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30rpx;

    .item-title {
      flex: 1;
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      margin-right: 20rpx;
    }

    .item-score {
      font-size: 36rpx;
      font-weight: 700;
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      min-width: 100rpx;
      text-align: center;

      &.score-excellent {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        color: #fff;
      }

      &.score-good {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        color: #fff;
      }

      &.score-average {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        color: #fff;
      }

      &.score-poor {
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
        color: #fff;
      }
    }
  }

  .item-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 30rpx;

    .item-info {
      flex: 1;

      .info-row {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .info-text {
          font-size: 26rpx;
          color: #666;
          margin-left: 12rpx;
        }
      }
    }

    .item-actions {
      display: flex;
      gap: 30rpx;

      .action-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8rpx;

        .action-text {
          font-size: 22rpx;
          color: #666;
        }
      }
    }
  }

  .score-progress {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 30rpx;

    .progress-bar {
      flex: 1;
      height: 8rpx;
      background: #f0f0f0;
      border-radius: 4rpx;
      overflow: hidden;

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
        border-radius: 4rpx;
        transition: width 0.3s ease;
      }
    }

    .progress-text {
      font-size: 24rpx;
      color: #999;
      min-width: 80rpx;
    }
  }

  .item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;

    .tag {
      padding: 8rpx 16rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      font-size: 22rpx;
      color: #666;
    }
  }
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .stats-container {
    .stats-card {
      padding: 20rpx 15rpx;

      .stats-number {
        font-size: 40rpx;
      }

      .stats-label {
        font-size: 22rpx;
      }
    }
  }

  .history-item {
    padding: 30rpx;

    .item-header {
      .item-title {
        font-size: 28rpx;
      }

      .item-score {
        font-size: 32rpx;
      }
    }
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.history-item {
  animation: fadeInUp 0.5s ease forwards;
}

/* 占位符样式 */
.placeholder-text {
  height: 32rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4rpx;
  width: 60%;
}

.placeholder-text-small {
  height: 26rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4rpx;
  width: 80rpx;
}

.placeholder-text-tiny {
  height: 22rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4rpx;
  width: 40rpx;
}

.placeholder-score {
  height: 36rpx;
  width: 100rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 20rpx;
}

.placeholder-icon {
  width: 28rpx;
  height: 28rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 50%;
}

.placeholder-progress {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 0;
  background: transparent;
}
</style>